<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>4.小艺术家：序列#4</title>
    <link rel="stylesheet" type="text/css" href="../../res/index.css" />
    <script type="text/javascript" src="../../js/blockly_compressed.js"></script>
    <script type="text/javascript" src="../../js/javascript_compressed.js"></script>
    <script type="text/javascript" src="../js4/action_d2.js"></script>
    <script type="text/javascript" src="../js4/action_s.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.1/TweenMax.min.js"></script>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .btn-circle {
            width: 36px;
            height: 36px;
            text-align: center;
            padding: 6px 0;
            font-size: 16px;
            line-height: 1.428571429;
            border-radius: 18px;
            border: rgb(200,200,200) 2px solid;
        }
        .btn-circle.btn-lg {
            width: 50px;
            height: 50px;
            padding: 10px 16px;
            font-size: 18px;
            line-height: 1.33;
            border-radius: 25px;
        }
        .btn-circle.btn-xs {
            width: 6px;
            height: 6px;
            padding: 6px 6px;
            font-size: 5px;
            line-height: 1.33;
            border-radius: 35px;
        }
        .counter-text{
            text-anchor: end;
            font-size: 16px;
            font-family: Verdana, Geneva, sans-serif;
            font-weight: bold;
            fill: white;
            stroke: black;
            stroke-width: 1;
            cursor: default;
        }
    </style>

</head>
<body>
    <div class = "top">
        <ul>
            <li><a href="../../course1.html">课程分类</a></li>
            <li><a href="">项目</a></li>
            <li><a href="">关于</a></li>
            <div id="header-mid" class="col-lg-4" style="margin:5px;position: fixed;left: 25%;">
                <div style="margin-top: 8px;display:inline;">
                    <div class="col-lg-4"  style="padding: 8px 0px; text-align: center;display:inline;width: 30%;">
                        <a style="color: #ffffff; font-size: 16px" href="../../course1.html">课程4：小艺术家：序列</a>
                    </div>
                    <div class="col-lg-8" style="display: flex; flex-direction: row; background-color: rgb(244, 244, 244); border-radius: 5px; height: 40px; align-items: center; border:#b4b4b4 1px solid; width: 62%;">
                        <abbr title="1" style="border-bottom: transparent">
                            <button type="button" onclick="location.href='../course1-4.html'" class="btn btn-default btn-circle btn-xs" style="display: block; margin-left: 2px; margin-right: 2px"></button>
                        </abbr>
                        <abbr title="2" style="border-bottom: transparent">
                            <button type="button" onclick="location.href='course1-4-2.html'"  class="btn btn-default btn-circle btn-xs" style="display: block; margin-left: 2px; margin-right: 2px"></button>
                        </abbr>
                        <abbr title="3" style="border-bottom: transparent">
                            <button type="button" onclick="location.href='course1-4-3.html'"  class="btn btn-default btn-circle btn-xs" style="display: block; margin-left: 2px; margin-right: 2px"></button>
                        </abbr>
                        <button type="button" onclick="location.reload()" class="btn btn-default btn-circle" style="display: block; margin-left: 1px; margin-right: 2px">
                            4
                        </button>
                        <abbr title="5" style="border-bottom: transparent">
                            <button type="button" onclick="location.href='course1-4-5.html'"  class="btn btn-default btn-circle btn-xs" style="display: block; margin-left: 2px; margin-right: 2px"></button>
                        </abbr>
                        <abbr title="6" style="border-bottom: transparent">
                            <button type="button" onclick="location.href='course1-4-6.html'"  class="btn btn-default btn-circle btn-xs" style="display: block; margin-left: 2px; margin-right: 2px"></button>
                        </abbr>
                        <abbr title="7" style="border-bottom: transparent">
                            <button type="button" onclick="location.href='course1-4-7.html'"  class="btn btn-default btn-circle btn-xs" style="display: block; margin-left: 2px; margin-right: 2px"></button>
                        </abbr>
                        <abbr title="8" style="border-bottom: transparent">
                            <button type="button" onclick="location.href='course1-4-8.html'"  class="btn btn-default btn-circle btn-xs" style="display: block; margin-left: 2px; margin-right: 2px"></button>
                        </abbr>
                    </div>
                </div>
            </div>

        </ul>
    </div>
    <div data-radium="true" style="padding-left: 60px; padding-right: 10px; float: left; width: 100%; box-sizing: border-box; background-color: rgb(221, 221, 221); border-top-right-radius: 5px; border-top-left-radius: 5px;">
        <div data-radium="true" style="width: 100%; position: relative; float: left; height: 88px; margin-right: -300px;">
            <div class="csf-top-instructions" data-radium="true" style="padding: 5px 0px;">
                <div data-radium="true" style="position: relative;">
                    <div data-radium="true" style="background-color: white; border-radius: 10px; margin: 5px 0px; padding: 5px 76px 5px 10px; position: relative; border-style: dashed; border-width: 1px; border-color: white;">
                        <div style="overflow: hidden;">
                                <div  style="float:left";><img src="../res4/artist.png" style="width: 50px height:50px"></div>
                                <div id = "hint">修改代码来画出这座城堡！</div>
                            </div></div></div></div></div>
    </div>
    <div id="visualization" style="position:absolute;top: 140px;left: 0px; height: 480px;width: 1080px">
        <div id="gamePanel" style="position: absolute;margin-left:25px;margin-top:20px;width: 400px;height: 480px">
            <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 400 400" width="400" height="400">
    <defs>
        <path d="M65.96 56.26L115.96 56.26L115.96 106.26L65.96 106.26L65.96 56.26Z" id="koGQoNTkN"></path>
        <clipPath id="clipb2BEqSWGAO">
            <use xlink:href="#koGQoNTkN" opacity="1"></use>
        </clipPath>
        <path d="M298.12 250.54L100 249.74L100.8 100.54" id="b2ZvRnIv9m"></path>
        <path d="" id="cb1A0ZGb6"></path>
        <path d="M296.66 102.25L297.52 252.25" id="d1DG9aVZgd"></path>
        <path d="M256.49 103.94L296.49 103.11" id="bWqyiA0Zj"></path>
        <path d="" id="a23LVaD4cL"></path>
        <path d="M141.79 102.25L101.79 102.25" id="changeRight"></path>
        <path d="M141.1 140.54L141.1 100.54" id="changeDown"></path>
        <path d="" id="b5nd9r7q6R"></path>
        <path d="M181.1 139L141.1 139" id="eatUSbrSa"></path>
        <path d="M180.42 99.69L180.42 139.69" id="b2tY5rolMZ"></path>
        <path d="M219.56 101.4L179.56 101.4" id="b2lo0UScEb"></path>
        <path d="M218.88 141.4L218.88 101.4" id="alXgU9XGn"></path>
        <path d="M256.49 139.86L219.73 139.86" id="a3fpaTJBJb"></path>
        <path d="" id="aE4ON55zU"></path>
        <path d="M255.63 102.25L256.49 139.86" id="aE6s1lFqT"></path>
        <path d="M182.13 247.55L182.13 186.87L182.13 247.55Z" id="i9axBIpeQ"></path>
        <path d="M218.03 249.26L217.17 186.87L181.27 186.87" id="a2w8CM7Cl"></path>
    </defs>
    <g>
        <g>
            <g>
                <g id="artist" clip-path="url(#clipb2BEqSWGAO)" opacity="1">
                    <image xlink:href="" x="0" y="0" width="50" height="50" transform="matrix(1 0 0 1 65.95607235142114 56.25621148876961)"></image>
                </g>
            </g>
            <g>
                <g>
                    <use xlink:href="#b2ZvRnIv9m" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="3" stroke-opacity="1"></use>
                </g>
            </g>
            <g>
                <g>
                    <use xlink:href="#cb1A0ZGb6" opacity="1" fill-opacity="0" stroke="#848484" stroke-width="3" stroke-opacity="1"></use>
                </g>
            </g>
            <g>
                <g>
                    <use xlink:href="#d1DG9aVZgd" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="3" stroke-opacity="1"></use>
                </g>
            </g>
            <g>
                <g>
                    <use xlink:href="#bWqyiA0Zj" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="3" stroke-opacity="1"></use>
                </g>
            </g>
            <g>
                <g>
                    <use xlink:href="#a23LVaD4cL" opacity="1" fill-opacity="0" stroke="#817e7e" stroke-width="3" stroke-opacity="1"></use>
                </g>
            </g>
            <g>
                <g>
                    <use xlink:href="#changeRight" opacity="1" fill-opacity="0" stroke="#808080" stroke-width="3" stroke-opacity="1"></use>
                </g>
            </g>
            <g>
                <g>
                    <use xlink:href="#changeDown" opacity="1" fill-opacity="0" stroke="#808080" stroke-width="3" stroke-opacity="1"></use>
                </g>
            </g>
            <g>
                <g>
                    <use xlink:href="#b5nd9r7q6R" opacity="1" fill-opacity="0" stroke="#817e7e" stroke-width="3" stroke-opacity="1"></use>
                </g>
            </g>
            <g>
                <g>
                    <use xlink:href="#eatUSbrSa" opacity="1" fill-opacity="0" stroke="#191818" stroke-width="3" stroke-opacity="1"></use>
                </g>
            </g>
            <g>
                <g>
                    <use xlink:href="#b2tY5rolMZ" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="3" stroke-opacity="1"></use>
                </g>
            </g>
            <g>
                <g>
                    <use xlink:href="#b2lo0UScEb" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="3" stroke-opacity="1"></use>
                </g>
            </g>
            <g>
                <g>
                    <use xlink:href="#alXgU9XGn" opacity="1" fill-opacity="0" stroke="#191818" stroke-width="3" stroke-opacity="1"></use>
                </g>
            </g>
            <g>
                <g>
                    <use xlink:href="#a3fpaTJBJb" opacity="1" fill-opacity="0" stroke="#191818" stroke-width="3" stroke-opacity="1"></use>
                </g>
            </g>
            <g>
                <g>
                    <use xlink:href="#aE4ON55zU" opacity="1" fill-opacity="0" stroke="#191818" stroke-width="3" stroke-opacity="1"></use>
                </g>
            </g>
            <g>
                <g>
                    <use xlink:href="#aE6s1lFqT" opacity="1" fill-opacity="0" stroke="#191818" stroke-width="3" stroke-opacity="1"></use>
                </g>
            </g>
            <g>
                <g>
                    <use xlink:href="#i9axBIpeQ" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="3" stroke-opacity="1"></use>
                </g>
            </g>
            <g>
                <g>
                    <use xlink:href="#a2w8CM7Cl" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="3" stroke-opacity="1"></use>
                </g>
            </g>
        </g>
    </g>
</svg>
            <button id="runButton" onclick="runButtonClick()"
                style="background-color:cyan;font-size: 20px;display: inline;">运行</button>
        </div>

        <div id="blocklyDiv" style="height: 480px;width: 600px;margin-left: 450px;margin-top: 20px;"></div>
    </div>
    <xml xmlns="http://www.w3.org/1999/xhtml" id="toolbox" style="display: none;">
        <block type="moveforward_up"></block>
        <block type="moveforward_down"></block>
        <block type="moveforward_left"></block>
        <block type="moveforward_right"></block>
    </xml>

    <xml xmlns="http://www.w3.org/1999/xhtml" id="workspaceBlocks" style="display:none">
        <block type="start" id="1" x="38" y="20"></block>
    </xml>
    <script src="../js4/workspace.js"></script>
    <script src="../js4/game4/game.js"></script>
</body>

</html>